<template>
	<view class="member-box">
		<view class="member-center">
			<view class="fixed-box" style="color: #FFFFFF;" @click="backMe"><i class="cuIcon-back f36"></i></view>
			<view class="member-heder ww100 h700">
				<view class="f26 member-lave" style="color: #796340;">
					<text>当前:</text>
					<text class="ml8">普通会员</text>
				</view>
			</view>
			<view class="tab-list">
				<u-tabs
					:list="listTab"
					active-color="#FFECA5"
					inactive-color="#ADADAD"
					bg-color=""
					:bar-style="style"
					gutter="40"
					item-width="300"
					:is-scroll="false"
					:current="currentIndex"
					@change="change"
				></u-tabs>
			</view>

			<view v-if="currentIndex == 0" class="meber-tab12">
				<view class="sewper-img h420 flex justify-between align-center pl30 pr30" style="color: #FFECA5;">
					<view class="f50" @click="sub"><i class="cuIcon-back"></i></view>
					<image src="https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/memb.png" class="w314 h308" mode=""></image>
					<view class="f50 " @click="add"><i class="cuIcon-right"></i></view>
				</view>
			</view>

			<view v-if="currentIndex == 1" class="meber-tab122">
				<view class="sewper-img h420 flex justify-between align-center pl30 pr30" style="color: #FFECA5;">
					<view class="f50" @click="sub"><i class="cuIcon-back"></i></view>
					<image v-if="currentIndex == 1" src="https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/pVIP.png" class="w314 h308" mode=""></image>
					<view class="f50 " @click="add"><i class="cuIcon-right"></i></view>
				</view>
			</view>

			<view v-if="currentIndex == 2" class="meber-tab123">
				<view class="sewper-img h420 flex justify-between align-center pl30 pr30" style="color: #FFECA5;">
					<view class="f50" @click="sub"><i class="cuIcon-back"></i></view>
					<image v-if="currentIndex == 2" src="https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/gVIP@2x.png" class="w314 h308" mode=""></image>
					<view class="f50 " @click="add"><i class="cuIcon-right"></i></view>
				</view>
			</view>

			<view v-if="currentIndex == 3" class="meber-tab124">
				<view class="sewper-img h420 flex justify-between align-center pl30 pr30" style="color: #FFECA5;">
					<view class="f50" @click="sub"><i class="cuIcon-back"></i></view>
					<image v-if="currentIndex == 3" src="https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/zVIP@2x.png" class="w314 h308" mode=""></image>
					<view class="f50 " @click="add"><i class="cuIcon-right"></i></view>
				</view>
			</view>

			<view v-if="currentIndex == 4" class="meber-tab125">
				<view class="sewper-img h420 flex justify-between align-center pl30 pr30" style="color: #FFECA5;">
					<view class="f50" @click="sub"><i class="cuIcon-back"></i></view>
					<image v-if="currentIndex == 4" src="https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/zVIP.png" class="w314 h308" mode=""></image>
					<view class="f50 " @click="add"><i class="cuIcon-right"></i></view>
				</view>
			</view>

			<view class="mt100 mb70 pl30rpx pr30 text-center" style="background-color: #34353B;">
				<button v-if="currentIndex == 0" type="default" class="cu-btn ww90 h90 r45 btn-bgc" @click="showProp(0.01)">￥388 成为会员</button>
				<button v-if="currentIndex == 1" type="default" class="cu-btn ww90 h90 r45 btn-bgc" @click="showProp(1)">￥988 成为会员</button>
				<button v-if="currentIndex == 2" type="default" class="cu-btn ww90 h90 r45 btn-bgc" @click="showProp(3)">￥2888 成为会员</button>
				<button v-if="currentIndex == 3" type="default" class="cu-btn ww90 h90 r45 btn-bgc" @click="showProp(4)">￥5888 成为会员</button>
				<button v-if="currentIndex == 4" type="default" class="cu-btn ww90 h90 r45 btn-bgc" @click="showProp(5)">￥8888 成为会员</button>
			</view>
		</view>

		<u-popup v-model="showBgi" width="520" border-radius="10" mode="center">
			<view class="text-center f28 pt54 lh48 pb50">
				<view class="w247" style="margin: 0 auto 45rpx; color: #533A06;">目前暂未解锁此功能 需升级会员</view>

				<button type="default" class="cu-btn w194 h70 r35" style="color:#EFE3BB; background-color:#997B3A ;">升级会员</button>
			</view>
		</u-popup>

		<!--  appPly -->
		<u-popup v-model="showPaly" width="520" border-radius="10" mode="bottom">
			<view class=" f28 pt40 lh40 pb50">
				<view class="w247 text-center" style="margin: 0 auto 45rpx; color: #533A06; font-weight: 600;">支付方式</view>
				<view class="flex align-center h106 pl30 pr30" v-for="(item, index) in ListFrom" :key="index">
					<view class="w50"><image :src="item.img" class="w50 h50" mode=""></image></view>
					<view class="ml30 ww100 h106 u-border-bottom flex align-center justify-between">
						<view class="f28" style="font-weight: 600;">{{ item.name }}</view>
						<view class="">
							<u-radio-group active-color="#000" v-model="radio" @change="radioGroupChange"><u-radio :name="item.id"></u-radio></u-radio-group>
						</view>
					</view>
				</view>
				
				<view class="text-center mt50">
					<button type="default" class="cu-btn w400 h80 r40 bg-gradual-green" @click="setPlay">确定</button>
				</view>
			</view>
		</u-popup>
		<!-- <view class="foot_box"></view> -->
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			listTab: [
				{
					name: '普通会员'
				},
				{
					name: '普通VIP'
				},
				{
					name: '高级VIP'
				},
				{
					name: '钻石VIP'
				},
				{
					name: '至尊VIP'
				}
			],
			currentIndex: 0,
			style: {
				marginLeft: 15 + 'rpx',
				height: 8 + 'rpx',
				width: 8 + 'rpx',
				borderRadius: 4 + 'rpx',
				backgroundColor: '#FFECA5'
			},
			showBgi: false,
			showPaly: false,
			moneInfo: '',
			radio: '',
			payWay: '',
			ListFrom: [
				{
					name: '微信',
					id: 1,
					img: '../../../static/img/weix.png'
				},
				{
					name: '支付宝',
					id: 0,
					img: '../../../static/img/zhifub.png'
				}
			]
		};
	},
	onShow() {},
	onLoad(e) {},
	methods: {
		change(index) {
			this.currentIndex = index;
		},

		backMe() {
			uni.navigateBack({
				delta: 1
			});
		},

		sub() {
			if (this.currentIndex == 0) return (this.currentIndex = 0);
			var init = 0;
			init = this.currentIndex--;
			console.log('this.currentIndex==>', this.currentIndex);
		},

		add() {
			if (this.currentIndex == 4) return (this.currentIndex = 4);
			var init = 0;
			init = this.currentIndex++;
		},

		showProp(index) {
			this.showPaly = true;
			this.moneInfo = index;
			this.appPly();
		},

		 appPly() {
			
			
		},
		radioGroupChange(inedx) {
			console.log(inedx);
			this.payWay = index
		},
		
		async setPlay() {
			const res = await this.$u.post('api/user/vip/aliPay', {
				vipMoneyId: this.moneInfo,
				payWay: this.payWay ? this.payWay : 0,
			});
			this.l.msgg(res.msg)
			if (res.code == 200) {
				this.showPaly = false;
				uni.requestPayment({
				    provider: 'alipay',
				    orderInfo: res.data, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
				    success: function (res) {
				        console.log('success:' + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log('fail:' + JSON.stringify(err));
				    }
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.member-box {
	width: 100%;
	// height: 100%;
	background-color: #34353b;

	.member-center {
		padding-bottom: 70rpx;

		.fixed-box {
			position: fixed;
			top: 50rpx;
			left: 30rpx;
			z-index: 9999;
		}

		.member-heder {
			background: url(https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/vip.png) no-repeat;
			background-size: 100% 100%;
			position: relative;

			.member-lave {
				position: absolute;
				right: 0;
				top: 155rpx;
				padding: 20rpx 24rpx 20rpx 28rpx;
				border-radius: 36rpx 0 0 36rpx;
				background: linear-gradient(-35deg, #cec08f, #ded3ae);
				opacity: 0.9;
			}
		}

		.meber-tab12 {
			width: 100%;
			height: 1280rpx;
			background: url(https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/tab.png) no-repeat;
			background-size: 100% 100%;
		}

		.meber-tab122 {
			width: 100%;
			height: 1280rpx;
			background: url(https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/h.png) no-repeat;
			background-size: 100% 100%;
		}

		.meber-tab123 {
			width: 100%;
			height: 1280rpx;
			background: url(https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/hv.png) no-repeat;
			background-size: 100% 100%;
		}

		.meber-tab124 {
			width: 100%;
			height: 1280rpx;
			background: url(https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/z.png) no-repeat;
			background-size: 100% 100%;
		}

		.meber-tab125 {
			width: 100%;
			height: 1280rpx;
			background: url(https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/z.png) no-repeat;
			background-size: 100% 100%;
		}

		.btn-bgc {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #724417;
			background: linear-gradient(270deg, #ba853a, #f2d29b);
			box-shadow: 2px 3px 12px 0px rgba(96, 59, 0, 0.22);
		}
	}

	/deep/.u-mode-center-box[data-v-ece9ae1c] {
		background-color: transparent !important;
		background: url(https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/bgc.png) no-repeat;
		background-size: 100% 100%;
	}
}
</style>
